<script lang="ts" setup>
import PageTable from "@/components/PageTable/index.vue";
import SearchHeader from "@/components/SearchHeader/index.vue";
import PageContainer from "@/components/PageContainer/index.vue";
import {reactive, ref} from "vue";
import {Mouse, Promotion, DeleteFilled, CirclePlusFilled, View} from '@element-plus/icons-vue'
import {cancelOwnerRentOrders, ownerRentOrderList} from "@/api/demoApi";
import {message} from "@/utils/message";
import OwnerRentOrder from "@/views/owner/components/OwnerRentOrder.vue";
import RentOrderDetail from "@/views/owner/components/RentOrderDetail.vue";
import {ButtonColor} from "@/utils/buttonsColor";
import {ElMessageBox} from "element-plus";

defineOptions({
  name: "ownerContract"
});

/**-------------------搜索-------------------**/
//查询参数
const queryList = [
  {key:'projectNo',label:'项目',type:'input'},
  {key:'projectName',label:'订单类型',type:'select',options:[
      {label:'租金G',value: 0},
      {label:'租金S',value: 1},
      {label:'对私年均分摊',value: 2},
      {label:'对公年均分摊',value: 3},
      {label:'保证金',value: 4},
    ]},
  {key:'projectName',label:'订单状态',type:'select',options:[
      {label:'待确认',value: 0},
      {label:'待发起审批',value: 1},
      {label:'已支付',value: 2},
      {label:'审批驳回',value: 3},
      {label:'审批撤销',value: 4},
      {label:'已作废',value: 5}
    ]},
]
//分页
const pageQuery = reactive({
  page:1,
  size:15
})
//查询回调
const searchHandler = (queryForm)=>{
  console.log(queryForm)
}
//分页回调
const paginationHandler = (pageInfo) =>{
  pageQuery.page = pageInfo.page
  pageQuery.size = pageInfo.size
}

/**-------------------列表-------------------**/
//总条数
const total = ref(0)
//表格列
const tableColumns = [
  {label:'订单类型',key:'orderType',custom:true},
  {label:'订单期数',key:'orderNo'},
  {label:'所属项目',key:'projectName'},
  {label:'业主',key:'ownerName'},
  {label:'付款单位',key:'paymentName'},
  {label:'开始日期',key:'orderStart'},
  {label:'结束日期',key:'orderEnd'},
  {label:'订单金额',key:'orderPrice'},
  {label:'实付金额',key:'realPrice'},
  // {label:'所属业主',key:'ownerName'},
  {label:'付款单位',key:'paymentName'},
  {label:'订单备注',key:'remark'},
  {label:'订单状态',key:'status',custom:true},
  {label:'操作',key:'operation',custom:true,width: 300}
]
//表格行数据
const tableData = ref([])
const getTableData = ()=>{
  tableData.value = ownerRentOrderList()
}
getTableData()

/**-------------------操作-------------------**/
//弹窗
const ownerRentOrder = ref()
const rentOrderDetail = ref()
const openDialog = (type:string,row:object)=>{
  switch (type){
    case 'view':
      rentOrderDetail.value.dialogShow('订单详情',row)
      break
    case 'add':
      ownerRentOrder.value.dialogShow('添加订单')
      break
  }
}
//作废
const delHandler = async row =>{
  try{
    const result = await ElMessageBox.prompt('请确认并填写作废原因', '订单作废',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        lockScroll:true,
        closeOnClickModal:false,
        closeOnPressEscape:false,
        inputPlaceholder: '请填写作废原因',
        inputValidator: (value)=>{
          if(!value) return '请输入作废原因'
          else return true
        },
        type: 'warning',
      }
    )
    //todo 删除接口
    if(result.action === 'confirm' && result.value) {
      row.status = 5
      row.cancelCase = result.value
      cancelOwnerRentOrders([row])
    }
    message('作废成功',{type:'success'})
    getTableData()
  }catch(err){

  }
}
//未完成提示
const notDone = ()=>{
  message('抱歉，功能设计中...',{type:'warning'})
}
</script>

<template>
  <PageContainer>
    <!--顶部筛选-->
    <SearchHeader :query-list="queryList" @search="searchHandler">
      <template #button>
        <el-button :color="ButtonColor.ADD" :icon="CirclePlusFilled" @click="openDialog('add',null)">添加</el-button>
      </template>
    </SearchHeader>
    <!--    表格-->
    <PageTable :columns="tableColumns" :page="pageQuery.page" :size="pageQuery.size" :table-data="tableData" :total="total" @pagination="paginationHandler">
      <template #orderType="{row}">
        <span v-if="row.orderType===0">租金G</span>
        <span v-if="row.orderType===1">租金S</span>
        <span v-if="row.orderType===2">对私年均分摊</span>
        <span v-if="row.orderType===3">对公年均分摊</span>
        <span v-if="row.orderType===4">保证金</span>
      </template>
      <template #status="{row}">
        <el-tag v-if="row.status===0" type="info">待确认</el-tag>
        <el-tag v-if="row.status===1" type="primary">待发起审批</el-tag>
        <el-tag v-if="row.status===2" type="success">已支付</el-tag>
        <el-tag v-if="row.status===3" type="warning">审批驳回</el-tag>
        <el-tag v-if="row.status===4" type="warning">审批撤回</el-tag>
        <el-tag v-if="row.status===5" type="danger">已作废</el-tag>
      </template>
      <template #operation="{row}">
        <el-button :color="ButtonColor.VIEW" :icon="View" plain round size="small" @click="openDialog('view',row)">详情</el-button>
         <el-button v-if="row.status === 0" :icon="Promotion" plain round size="small" type="danger" @click="notDone">一键支付</el-button>
        <!--        <el-button v-if="[0,3,4].includes(row.status)" :icon="Mouse" plain round size="small" type="primary" @click="notDone">订单确认</el-button>-->
        <!--        <el-button v-if="row.status === 1" :icon="Promotion" plain round size="small" type="primary" @click="notDone">发起审批</el-button>-->
        <el-button v-if="[0,3,4].includes(row.status)" :icon="DeleteFilled" plain round size="small" type="danger" @click="delHandler(row)">订单作废</el-button>
      </template>
    </PageTable>

<!--    订单弹窗-->
    <OwnerRentOrder ref="ownerRentOrder" @done="getTableData" />
<!--    订单详情-->
    <RentOrderDetail ref="rentOrderDetail" />
  </PageContainer>
</template>

<style lang="scss" scoped>

</style>
